import React from 'react';

class IndexBar extends React.Component {
    state = { 
        citydata:{},
        sidedata:[],
        t:0
     }
    render() { 
        let {citydata,sidedata,t}=this.state
        let d=0
        let h=0
        let sarr=[]
        return ( 
            <div>
                <div style={{position:"relative"}}>
                     <div style={{
                         height:this.props.height+"px",
                         overflow:"auto",
                       
                     }}
                     ref="egz"
                     onScroll={()=>{
                        
                         sarr.forEach((v,k)=>{
                             if(this.refs.egz.scrollTop>=sarr[k]&&this.refs.egz.scrollTop<=sarr[k+1]){
                                 this.setState({
                                     t:v
                                 })
                             }
                         })
                     }}
                     >
                         {
                             Object.keys(citydata).map((v,k)=>{
                                 return <div>
                                       <h2 style={{
                                           height:"30px",
                                           lineHeight:"30px",
                                           margin:0,
                                           padding:0,
                                           boxSizing:"border-box",
                                           background:"rgb(0 0 0 / 0%)"
                                       }}>
                                           {v.toUpperCase()}
                                       </h2>
                                      {
                                          citydata[v].map((i,j)=>{
                                          
                                             return  <div
                                            
                                              onClick={()=>{
                                                  this.props.egz(i)
                                              }}
                                               style={{
                                                
                                                background:"white",
                                                height:"30px",
                                                margin:0,
                                                padding:0
                                               
                                            }}>
                                                  <p style={{
                                                      margin:0,
                                                      padding:0,
                                                      borderBottom:"1px solid #f4eeee",
                                                      boxSizing:"border-box",
                                                      height:"30px",
                                                      paddingLeft:"10px",
                                                      lineHeight:"30px",
                                                      fontSize:"16px"
                                                  }}>
                                                  {i.name}
                                                  </p>
                                              </div>
                                            
                                          })
                                      }
                                 </div>
                             })
                         }



                     </div>

                     {/* 右边导航 */}
                     <div style={{
                         position:"absolute",
                         width:"30px",
                         height:this.props.height+"px",
                         top:0,
                         right:"5px",
                         display:"flex",
                         flexDirection:"column",
                     }}>
                       {
                           sidedata.map((v,k)=>{
                              sarr.push(d+h)
                               let dom=<p 
                               onClick={this.tab.bind(this,d+h)}
                               style={{
                                   textAlign:"center",                                  
                                   flex:1,
                                   display:"flex",
                                   alignItems:"center",
                                   justifyContent:"center",
                                   margin:0,
                                   padding:0
                                   }}>
                                   <b style={{
                                     background:t==(d+h)?this.color():'',
                                     display:"inline-block",
                                     width:"18px",
                                     height:"18px",
                                     borderRadius:"50%",
                                     lineHeight:"18px",
                                     textAlign:"center"
                                   }}>{v.toUpperCase()}</b>
                               </p>
                                h+=30
                                d+=30*citydata[v].length

                                return dom
                           })
                       }
                     </div>
                </div>
            </div>
            
         );
    }
    init(){
        let obj={}
        this.props.data.forEach((v,k)=>{
               let i=v.short
               if(obj[i]){
                  obj[i].push(v)
               }else{
                 obj[i]=[v]
               }
           })
           let keyarr=Object.keys(obj)
           keyarr.sort()// 排序
           keyarr.forEach((v,k)=>{// abc  排序后重新赋值
            this.state.citydata[v]=obj[v]
           })

           this.setState({
            citydata:this.state.citydata,
            sidedata:keyarr
           })
    }
    color(){
        return this.props.sidegl?this.props.sidegl:"yellowgreen"
    }
    tab(h){
        
        this.refs.egz.scrollTop=h
    }
    componentDidMount(){
       this.init()
    }
}
 
export default IndexBar;